<template>
  <div class="declare-box">
    <PageTitle text="用气申请注意事项"></PageTitle>
    <div class="detailContent box">
      <div class="title">请仔细阅读后申请安装</div>
      <div>
        1、工商户申请用气，需安排工作人员上门查看。
      </div>
      <div>
        2、业务员现场勘查后方可确定是否符合安装条件。
      </div>
      <div>
        3、请认真填写完整的信息，以便工作人员能更快更准确为您办理您的报装。
      </div>
      <div>
        4、在用气报装过程中，用户不需支付任何费用。
      </div>
      <div>
        5、工商用户完成燃气报装后，将指定专人一对一负责跟踪、指导做好用气环境安全措施，采取简化手续、优化流程等“管家式”服务。
      </div>
    </div>
    <div class="detailContent box">
      <div class="title">申请信息</div>
      <van-form @submit="onSubmit">
        <div class="item">
          <div class="lable">
            安装地址
          </div>
          <van-field>
            <template #input>
              <van-field v-model="form.address" placeholder="请输入安装地址" :rules="[{ required: true }]" />
            </template>
          </van-field>
        </div>
        <div class="item">
          <div class="lable">
            联系人
          </div>
          <van-field>
            <template #input>
              <van-field v-model="form.user" placeholder="请输入联系人" :rules="[{ required: true }]" />
            </template>
          </van-field>
        </div>
        <div class="item">
          <div class="lable">
            联系方式
          </div>
          <van-field>
            <template #input>
              <van-field v-model="form.phone" placeholder="请输入联系方式" :rules="[{ required: true }]" />
            </template>
          </van-field>
        </div>
        <div class="formTips">为了避免预约信息不完整导致预约申请无法顺利进行，请您填写完成后再次核对信息是否正确或完整。</div>
        <div style="margin: 16px;">
          <van-button round block type="primary" native-type="submit" :disabled="disabled">
            提交
          </van-button>
        </div>
      </van-form>

    </div>
    <div class="tips box">
      <div class="title">温馨提示</div>
      <div>当日下午17:00点前提交申请的，工作人员1个工作日内会上门查勘，告知燃气管线走向和费用。请您保持电话通畅；当日下午17:00点后提交申请的，则会延后一天，请悉知。</div>
    </div>
  </div>
</template>

<script>
// import { getLink } from "@/api/index";
import PageTitle from '../components/pageTitle.vue'
export default {
  name: 'Declare',
  components: {
    PageTitle
  },
  data () {
    return {
      required: true,
      form: {
        address: '',
        user: '',
        phone: '',
      },
      disabled: false,
    };
  },
  computed: {
    isPhone () {
      return /^1\d{10}$/.test(this.form.phone);
    },
  },
  created () { },
  methods: {
    onSubmit () {
      var vm = this;
      if (!vm.isPhone) return vm.$notify({ type: 'warning', message: '电话号码格式有误', duration: 1000 });
      vm.disabled = true
      setTimeout(() => {
        vm.disabled = false
        vm.form.address = ''
        vm.form.user = ''
        vm.form.phone = ''
      }, 400);
      // getLink(vm.form).then(res => {
      //   console.log('成功', res);
      //   if (res.code == 200) {
      //     vm.form.address = ''
      //     vm.form.user = ''
      //     vm.form.phone = ''
      //     vm.$notify({ type: 'primary', message: '申请成功！', duration: 3000, background: "#1462ff" });
      //   } else {
      //     console.log('保存失败', res);
      //   }
      // });
    }
  },
  mounted () {
    var vm = this;
  },
};
</script>

<style lang="scss" scoped>
// @import "@/assets/css/css.scss";
.declare-box {
  padding-bottom: 10px;
  .pageTitle {
    margin: 10px 14px;
    min-height: 60px;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    text-shadow: 0 0 5px #000;
    background: #042bba url("../../static/image/detailTitBj.png") no-repeat
      bottom center;
    background-size: cover;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .box {
    border-radius: 10px;
    background: #fff;
    box-sizing: border-box;
    box-shadow: 0 0 20px #eee;
    padding: 0 18px 20px;
    margin: 14px;
    font-size: 15px;
    line-height: 26px;
    overflow: hidden;

    .title {
      width: 100%;
      height: 30px;
      padding-left: 14px;
      line-height: 30px;
      font-size: 17px;
      font-weight: bold;
      color: #222;
      position: relative;
      box-sizing: border-box;
      margin: 10px 0;
      &::before {
        content: "";
        position: absolute;
        left: 8px;
        top: 50%;
        margin: -8px;
        width: 4px;
        height: 16px;
        border-radius: 4px;
        background: rgb(20, 98, 255);
        background: linear-gradient(
          0deg,
          rgba(20, 98, 255, 1) 0%,
          rgba(115, 161, 255, 1) 100%
        );
      }
    }
  }
  .detailContent {
    .title {
      &::before {
        background: rgb(20, 98, 255);
        background: linear-gradient(
          0deg,
          rgba(20, 98, 255, 1) 0%,
          rgba(115, 161, 255, 1) 100%
        );
      }
    }
  }
  .tips {
    .title {
      &::before {
        background: rgb(255, 90, 0);
        background: linear-gradient(
          0deg,
          rgba(255, 90, 0, 1) 0%,
          rgba(255, 163, 113, 1) 100%
        );
      }
    }
  }
  // 表单
  .formTips {
    padding: 8px;
    font-size: 12px;
    line-height: 18px;
    border-radius: 4px;
    background: rgba(255, 163, 113, 0.2);
    color: rgba(255, 90, 0, 1);
  }
  .lable {
    font-size: 14px;
    color: #222;
  }
  ::v-deep .van-cell {
    padding: 6px 0 12px;
    .van-cell {
      border: 1px solid #e0e0e0;
      padding: 8px 6px;
      background: #f5f5f5;
      font-size: 13px;
      border-radius: 4px;
    }
  }
  ::v-deep .van-button--primary {
    background-color: #042bba;
    border-color: #042bba;
  }
}
</style>
